<template>
    <div>
        <h1>使用vue地图插件</h1>
        <baidu-map class="bm-view" :center="center" :zoom="zoom" @ready="handler">
            <!-- <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation> -->
            <bm-map-type :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']" anchor="BMAP_ANCHOR_TOP_LEFT"></bm-map-type>
            <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true"></bm-geolocation>
            <bm-panorama></bm-panorama>
            <bm-marker 
            @click="infoWindow.show=true"
            :position="{lng: 116.404, lat: 39.915}"  >
                <bm-label content="我爱北京天安门" :labelStyle="{color: 'red', fontSize : '24px'}" 
                :offset="{width: -35, height: 30}"/> 
            </bm-marker>
            <!-- <bm-polygon :path="polygonPath" stroke-color="blue" :stroke-opacity="0.5" :stroke-weight="2" :editing="true" @lineupdate="updatePolygonPath"/>  -->
            <bm-info-window :position="{lng: 116.404, lat: 39.915}" title="学好前端月薪过万" 
            :show="infoWindow.show">
                <p v-text="infoWindow.contents"></p>
                 
            </bm-info-window>
        </baidu-map>
        <p>{{  infoWindow.show}}</p>
    </div>
</template>
<script>
    export default {
        data(){
            return {
                center: {lng: 0, lat: 0},
                zoom: 3,
                polygonPath: [
                    {lng: 116.412732, lat: 39.911707},
                    {lng: 116.39455, lat: 39.910932},
                    {lng: 116.403461, lat: 39.921336}
                ],
                infoWindow: {
                    show: false,
                    contents: ' 前端简单，还高薪'
                }
            }
        },
        methods: {
            handler ({BMap, map}) {
                console.log(BMap, map)
                this.center.lng = 116.404
                this.center.lat = 39.915
                this.zoom = 15
            }
        }
    }
</script>
<style>
    .bm-view{
        width:100%;
        height:70vh;
    }
</style>